<template>
	<!-- 单图显示组件 -->
	<view class="imageThreeComponent">
		<view class="image_list">
			<view class="left">
				<div-base-navigator :pageUrl="newData.leftPageUrl" style="background: #FFFFFF;">
					<image :src="newData.leftImageUrl" class="image"></image>
				</div-base-navigator>
			</view>
			<view class="right">
				<div-base-navigator :pageUrl="newData.rightTopPageUrl" style="background: #FFFFFF;">
					<image :src="newData.rightTopImageUrl" class="image"></image>
				</div-base-navigator>
				<div-base-navigator :pageUrl="newData.rightBottomPageUrl" style="background: #FFFFFF;">
					<image class="right-bottom-image image" :src="newData.rightBottomImageUrl"></image>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'basic-image',
		props: {
			value: {
				type: Object,
				default: ()=>{
					return {
						pageUrl: ``,
						imageUrl: '',
						height: 100
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value
			};
		},
		mounted() {
			// console.log(this.value)
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.image_list {
		display: flex;
		margin: 20rpx;
        margin-bottom: 0;

		.left {
			flex: 0 0 350rpx;
			margin-right: 20rpx;

			.image {
				width: 100%;
				height: 350rpx;
			}
		}

		.right {
			flex: 1;

			.image {
				width: 100%;
				height: 166rpx;
			}
			.right-bottom-image {
				margin-top: 12rpx;
			}
		}
	}
</style>
